<template>
    <div  class="box12">
      <el-row type="flex" class="row-bg" justify="space-around">
    <el-col :span="6"><div class="grid-content bg-purple" >
      组长:赵文琪</div>
      </el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light">
      组员:王福龙
    </div>
    </el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      组员:冷书德
    </div>
    </el-col>
  </el-row>
  <br>
  <el-button class="anniu" type="text" @click="centerDialogVisible = true">查看详细信息</el-button>
  
  <el-dialog
    title="新橙音乐小组"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <span>赵文琪:60% (贡献率)  <br>王福龙:30%(贡献率) <br>冷书德:10%(贡献率) <br></span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
    </div>
  
    
  </template>
  
  <script>
   export default {
      data() {
        return {
          centerDialogVisible: false
        };
      }
    };
  </script>
  
  <style>
  .anniu{
     margin-left: 400px;
  }
  .el-row {
      margin-bottom: 20px;
     margin-top: 50px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
  
    }
  </style>